<template>
	<view class="main_box">
		<view class="fix_title">
			1/8选择学校并绑定用户
		</view>
		<view class="txt">
			请选择开户用户所在的学校
		</view>
		<view class="b_item">
			<view class="input_box">
				<text class="i_txt">学校</text>
				<view class="secletInput" @tap="handleChangePupop">
					<view v-if="orgName" class="selectValue active">
						{{orgName}}
					</view>
					<view v-else class="selectValue">
						请输入用户所在机构
					</view>
				</view>
			</view>
			<view class="input_box">
				<view v-if="!topOff" class="forbidden">

				</view>
				<text class="i_txt">姓名</text>
				<input type="text" style="flex: 1;" @input="change_name" v-model.trim="empName"
					 placeholder="请输入对应绑卡学生姓名" />
			</view>
			<view class="input_box">
				<view v-if="!topOff" class="forbidden">

				</view>
				<text class="i_txt">身份证</text>
				<input type="text" style="flex: 1;" @input="change_cardNo" v-model.trim="idCardNo"
					 placeholder="请输入学生身份证号码" />
			</view>
		</view>
		<view class="btn" @click="toGetFace">
			{{btnTitle?'查询':'下一步'}}
		</view>
		<view class="kdn">
			<image src="/static/images/blank/4341yu.png" mode=""></image>
			<view class="subx">
				交通银行 提供产品服务
			</view>
		</view>
		<popup-org title="选择机构" ref="popupOrg" :parentId="parentId" @change="cliName"></popup-org>
		<popup-org-model :toForm="'guide'" title="请选择绑卡" ref="popupOrgModel" :batId="batId" :isBlank="isBlank"
			:orgId="orgId+''" :kind="kind" :activeIndex="activeIndex" @getCardNo="getCardNo" :dataList="userList"
			v-model="showOrg1">
		</popup-org-model>
	</view>
</template>

<script>
	import {
		queryOrg,
		bindEmp,
		findBaseArea,
		selectCardInfoByIdCardNo,
		queryStudentCardBalance
	} from '../../common/api/index.js'
	import {
		getPhoneCode,
		getTwoUserList,
		getMoneny,
		idCardOCR,
		getSchool
	} from '../../common/api/blank.js';
	import {
		_showToast,
		_showLoading
	} from '../../common/js/util.js'
	import popupOrg from '../../components/custom-popup-org/custom-popup-school.vue'
	import popupOrgModel from '../../components/custom-popup-org/custom-popup-model.vue'
	export default {
		data() {
			return {
				parentId: '',
				orgName: '',
				topOff: false, //遮罩层
				empName: '', //用户名
				idCardNo: '', //身份证
				btnTitle: false,
				activeIndex: 0,
				batId: "",
				orgId: "",
				userList: [],
				showOrg1: false,
				isBlank: true,
				undown: null,
				num: 2,
				kind: "2",
			}
		},
		components: {
			popupOrg,
			popupOrgModel
		},
		onLoad(option) {
			this.kind = option.kind
		},
		watch: {
			orgName: {
				handler(newVal, oldVal) {
					if (this.orgName) {
						this.topOff = true
						this.btnTitle = true
					}
				},
			},
		},
		methods: {
			handleChangePupop() {
				this.$refs.popupOrg.showPopup = !this.$refs.popupOrg.showPopup
			},
			getList() {
				let s_userId = uni.getStorageSync('s_userId')
				_showLoading("正在检索绑定详情...")
				queryStudentCardBalance({
					userId: s_userId,
					queryCard: true,
					queryWallet: true,
					orgId: this.orgId,
					// bindType: this.bindType
				}).then(res => {
					uni.hideLoading()
					// console.log(res)
					if (res.code == 0 && res.data.students.length > 0) {
						if (res.data.students[0].students.length > 0) {
							_showToast("该学校已绑定学生")
							// console.log(this.kind==1)
							if (this.kind == 1) { //是否是一类户
								uni.redirectTo({
									url: "/pageBlank/components/inputOneCount?orgId=" +
										this.orgId
								});
							} else {
								uni.redirectTo({
									url: "/pageBlank/verification/verification"
								});
							}
						}
					} else {
						_showToast(res.msg)
						return
					}
				}).catch(err => {
					uni.hideLoading()
					_showToast('异常')
					console.log(err)
				})
			},
			getCardNo() {
				console.log("malegebi")
			},
			toGetFace() {
				if (this.btnTitle) {
					if (!this.empName) {
						_showToast("请输入对应绑卡学生姓名")
						return
					}
					if (!this.idCardNo) {
						_showToast("请输入学生身份证号码")
						return
					}
					_showLoading('查询中,请稍后...')
					selectCardInfoByIdCardNo({
						idCardNo: this.idCardNo,
						orgId: this.orgId,
						empName: this.empName
					}).then(res => {
						console.log("------66666------", res)
						if (res.code == 0) {
							this.userList = res.data.map(item => {
								item = {
									...item,
									orgName: this.orgName
								}
								return item
							})
							this.showOrg1 = true
						} else {
							uni.showModal({
								title: '温馨提示',
								content: `${res.msg}`,
								showCancel: false
							})
						}
						uni.hideLoading()
					}).catch(err => {
						uni.hideLoading()
						console.log(err)
					})
				} else {
					if (this.orgId) {
						if (!this.empName) {
							_showToast("请输入对应绑卡姓名")
							return
						}
						if (!this.idCardNo) {
							_showToast("请输入身份证号码")
							return
						}
						uni.navigateTo({
							url: "/pageBlank/verification/verification"
						})
					} else {
						_showToast("请选择开户用户所在的学校")
					}
				}

			},
			cliName(obj) {
				// console.log(obj)
				this.orgId = obj.orgId;
				uni.setStorageSync('orgId', this.orgId)
				this.orgName = obj.orgName;
				this.getList()
			},
			toCancel() {
				this.isValue = false
			},
			change_name(e) {
				this.empName = e.target.value.replace(/\s*/g, "") //去除所有空格
			},
			change_cardNo(e) {
				this.idCardNo = e.target.value.replace(/\s*/g, "") //去除所有空格
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main_box {
		padding: 24upx;
		box-sizing: border-box;
		overflow-y: auto;

		.kdn {
			position: fixed;
			left: 0rpx;
			bottom: 68rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			>image {
				width: 34rpx;
				height: 33rpx;
			}

			.subx {
				margin-left: 8rpx;
				height: 34rpx;
				font-size: 23rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #003A79;
				line-height: 34rpx;
			}
		}

		.btn {
			position: fixed;
			left: calc(50% - 179rpx);
			bottom: 168rpx;
			width: 358rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #3478F5;
			box-shadow: 0rpx 3rpx 26rpx 1rpx rgba(55, 98, 244, 0.58);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			opacity: 1;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Light, Source Han Sans CN;
			font-weight: 300;
			color: #FFFFFF;
			// margin: 0 auto;
		}

		.fix_title {
			margin: 30upx 0 60upx 0;
			font-size: 40upx;
			font-weight: bolder;
			display: flex;
			align-items: center;
			margin-left: 10rpx;

			&::before {
				content: '';
				height: 36upx;
				width: 12upx;
				background-image: linear-gradient(to bottom, #c3defc, #007AFF);
				margin-right: 12upx;
				border-radius: 6upx;
			}
		}

		.txt {
			height: 46rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #020202;
			line-height: 46rpx;
			margin-bottom: 68rpx;
			margin-left: 8rpx;
			margin-top: 56rpx;

		}

		.b_item {
			margin-bottom: 40rpx;

			.input_box {
				background: #ffffff;
				border-radius: 8rpx;
				border: 1px solid #e6e6e6;
				height: 84rpx;
				padding: 0 20rpx;
				width: calc(100% - 30rpx);
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 20rpx;
				position: relative;

				.forbidden {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 2;
					background-color: #ccc;
					opacity: 0.5;
				}

				.i_txt {
					font-size: 30rpx;
					font-family: "PingFangSC-Medium, PingFang SC";
					font-weight: 500;
					color: #6b707a;
					width: 105rpx;
					// border-right: 1px solid #E6E6E6;
					text-align: justify;
					text-align-last: justify;
					margin-right: 18rpx;
				}
				.secletInput {
					width: calc(100% - 123rpx);
					height: 100%;
					display: flex;
					align-items: center;
					.selectValue {
						width: 100%;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						font-weight: 500;
						color: #ADADAD;
					}
				
					.active {
						color: #000;
					}
				}
			}

			.list_box {
				width: 73.5%;
				position: absolute;
				padding: 20rpx;
				border: 0.5rpx solid rgba(0, 0, 0, 0.1);
				border-top: none;
				top: 265rpx;
				z-index: 999;
				background-color: #ffffff;
				box-shadow: 5px 5px 5px rgba(215, 215, 215, 0.349019607843137);
				left: 85rpx;
			}
		}


	}
</style>